<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员用户管理系统</title>

    <!-- 引入Vue和Axios -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 引入Element UI 样式和组件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .user-list {
            margin-top: 20px;
        }
        .user-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .user-info {
            flex: 1;
            display: flex;
            align-items: center;
        }
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-weight: bold;
        }
        .user-details {
            flex: 1;
        }
        .user-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .user-email {
            color: #666;
            font-size: 14px;
        }
        .user-status {
            margin-left: 20px;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .user-status.active {
            background-color: #e6f7ff;
            color: #1890ff;
        }
        .user-status.banned {
            background-color: #fff2f0;
            color: #f5222d;
        }
        .user-actions {
            margin-left: 20px;
        }
        .el-button {
            margin-left: 10px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .el-dialog__body {
            padding: 20px;
        }
        .el-form-item {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="header">
            <h2>用户管理</h2>
            <el-button type="primary" @click="refreshUsers">刷新列表</el-button>
        </div>

        <div class="user-list">
            <div v-if="loading" style="text-align: center; padding: 20px;">
                <el-button type="text" loading>加载中...</el-button>
            </div>

            <div v-else-if="userList.length === 0" style="text-align: center; padding: 20px; color: #999;">
                暂无用户数据
            </div>

            <div v-else>
                <div class="user-item" v-for="user in userList" :key="user.userId">
                    <div class="user-info">
                        <div class="user-avatar">{{ user.username.charAt(0).toUpperCase() }}</div>
                        <div class="user-details">
                            <div class="user-name">{{ user.username }}</div>
                            <div class="user-email">{{ user.email}}</div>
                        </div>
                    </div>
                    <div class="user-status" :class="{ 'active': user.state === 1, 'banned': user.state === 0 }">
                        {{ user.state === 1 ? '正常' : '已禁用' }}
                    </div>
                    <div class="user-actions">
                        <el-button
                                :type="user.state === 1 ? 'danger' : 'success'"
                                size="small"
                                @click="user.state === 1 ? banUser(user.userId) : releaseUser(user.userId)"
                        >
                            {{ user.state === 1 ? '禁用' : '恢复' }}
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                userList: [],
                loading: false
            }
        },
        created() {
            this.fetchUsers();
        },
        methods: {
            // 获取用户列表
            fetchUsers() {
                this.loading = true;
                axios.get('http://localhost:8080/admin/queryAll')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.userList = response.data.data;
                        } else {
                            this.$message.error(response.data.message || '获取用户列表失败');
                        }
                    })
                    .catch(error => {
                        this.$message.error('请求出错: ' + error.message);
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },

            // 刷新用户列表
            refreshUsers() {
                this.fetchUsers();
                this.$message.success('用户列表已刷新');
            },

            // 禁用用户
            banUser(userId) {
                this.$confirm('确定要禁用该用户吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 修正：使用正确的参数名userId
                    axios.get(`http://localhost:8080/admin/banUser/${userId}`)
                        .then(response => {
                            if (response.data.code === 200) {
                                this.$message.success('禁用成功');
                                this.fetchUsers();
                            } else {
                                this.$message.error(response.data.message || '禁用失败');
                            }
                        })
                        .catch(error => {
                            this.$message.error('请求出错: ' + error.message);
                        });
                }).catch(() => {
                    this.$message.info('已取消操作');
                });
            },

// 恢复用户
            releaseUser(userId) {
                this.$confirm('确定要恢复该用户吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    // 修正：使用正确的参数名userId
                    axios.get(`http://localhost:8080/admin/releaseUser/${userId}`)
                        .then(response => {
                            if (response.data.code === 200) {
                                this.$message.success('恢复成功');
                                this.fetchUsers();
                            } else {
                                this.$message.error(response.data.message || '恢复失败');
                            }
                        })
                        .catch(error => {
                            this.$message.error('请求出错: ' + error.message);
                        });
                }).catch(() => {
                    this.$message.info('已取消操作');
                });
            },
            // 格式化日期
            formatDate(dateStr) {
                if (!dateStr) return '';
                const date = new Date(dateStr);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
        }
    });
</script>
</body>
</html>
